<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/echarts.min.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="css/index.css">
		<!-- 引入组件库 -->
		<script src="js/index.js"></script>
		<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
	</head>
	<body>
		<div id="app">
			<div style="text-align: center;font-size: 22px;font-weight: bold;">爬虫弹幕统计</div>
			<div style="text-align: center;font-size: 20px;font-weight: bold;position: relative;height: 30px;">
				<el-button size="small" style="position: absolute;right: 20px;" @click="showTime = !showTime">{{showTime ? '隐藏':'显示'}}</el-button>
				<span v-if="showTime">倒计时：{{timeout}}</span>
			</div>
			<div id="barrageBar" :style="{height: currentHeight + 'px', width: '100%'}">
			</div>
		</div>
	</body>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					currentHeight: 0,
					timeout: 0,
					showTime: true
				}
			},
			methods: {
				loadBar(yAxisData, seriesData, markPointData) {
					var myChart = echarts.init(document.getElementById("barrageBar"))
					if (!yAxisData) {
						yAxisData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					}
					if (!seriesData) {
						seriesData = [5, 20, 36, 13, 16, 8, 32]
					}
					if (!markPointData) {
						markPointData = [{
							name: '啦啦',
							coord: [32, 'Sun']
						}]
					}
					var option = {
						title: {
							text: ''
						},
						tooltip: {
							trigger: 'axis'
						},
						legend: {
							data: ['票数'],
							top: 10
						},
						grid: {
							top: '0',
							left: '5%',
							right: '5%',
							bottom: '5%',
							containLabel: true
						},
						xAxis: {
							type: 'value',
							max: function(value) {
								return value.max * 1.2 + 10;
							},
							axisLine: {
								show: false //是否展示横坐标轴线
							},
							splitLine: {
								show: false //是否展示横坐标轴线
							},
							axisLabel: {
								fontSize: 20 //横坐标字体大小
							}
						},
						yAxis: {
							type: 'category',
							data: yAxisData,
							splitLine: {
								show: false //是否展示横坐标轴线
							},
							nameTextStyle: {
								fontSize: 20
							},
							axisLabel: {
								fontSize: 20 //纵坐标字体大小
							},
							minorSplitLine: {
								show: false
							},
							axisPointer: {
								type: 'none'
							}
							// name: '月份'
						},
						series: [{
							name: '',
							type: 'bar',
							barWidth: 80,
							data: seriesData,
							label: {
								show: true,
								textBorderColor: '#333',
								textBorderWidth: 2,
								position: 'right',
								fontSize: 16 //柱子上的票数字体大小
							},
							markPoint: {
								// symbol: 'circle',
								symbol: function(value, params) {
									console.log(params.data.image)
									// params.image = 'https://www.echartsjs.com/zh/images/logo.png'
									return `image://${params.data.image}`
									// return `image://https://www.echartsjs.com/zh/images/logo.png`
								},
								symbolSize: 80,
								symbolOffset: ['50%', 0],
								data: markPointData
							}
						}]
					}
					myChart.setOption(option)
				}
			},
			beforeMount() {
				var height = 80
				var h = document.documentElement.clientHeight || document.body.clientHeight;
				this.currentHeight = h - height; //减去页面上固定高度height
			},
			mounted() {
				var barData = []
				if (timecount) {
					clearInterval(timecount)
				}

				var timecount = setInterval(() => {
					axios.get('http://localhost:8000/barrage').then(
						// axios.get('test/barrage').then(
						res => {
							// console.log(res.data)
							barData = res.data.data
							this.timeout = res.data.timeout
							// barData = [{
							// 		"avatar": "http://127.0.0.1:8000/images/1.png",
							// 		"content": "1",
							// 		"name": "张三",
							// 		"num": 35
							// 	},
							// 	{
							// 		"avatar": "http://127.0.0.1:8000/images/1.png",
							// 		"content": "2",
							// 		"name": "李四",
							// 		"num": 35
							// 	},
							// 	{
							// 		"avatar": "http://127.0.0.1:8000/images/1.png",
							// 		"content": "2",
							// 		"name": "西路",
							// 		"num": 25
							// 	},
							// 	{
							// 		"avatar": "http://127.0.0.1:8000/images/1.png",
							// 		"content": "2",
							// 		"name": "王文",
							// 		"num": 25
							// 	}
							// ]
							var yAxisData = [],
								seriesData = [],
								markPointData = []
							for (var i in barData) {
								yAxisData.push(barData[i].name)
								seriesData.push({
									value: barData[i].num,
									itemStyle: {
										color: barData[i].color
									}
								})
								markPointData.push({
									name: barData[i].name,
									coord: [barData[i].num + 2, barData[i].name],
									image: barData[i].avatar
								})
							}
							// console.log(markPointData)
							this.loadBar(yAxisData, seriesData, markPointData)
							if (this.timeout < 1) {
								this.$message({
									message: '倒计时0（已结束）',
									offset: 100
								})
								clearInterval(timecount)
							}
						}
					).catch(e => {
						console.log('-----------')
						console.log(e)
					})
				}, 1000)
			}
		})
	</script>
</html>
